<template>
  
  <div>
    
    
  <header-com>
    <div class="header-search">
            <i class="iconfont icon-search"></i>
            <input type="text" class="search-title" />
        </div>
  </header-com>
  <header-ele @changeSort="changeSort"></header-ele>


<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  class="product-list"
  offset="100"
>
  <van-cell v-for="item in shopList" :key="item.id"  @click="toProductDetail(item.id)">
    <van-card :num="item.stock" :price="item.price" :desc="item.subtitle" :title="item.name" :thumb="item.imageHost+item.mainImage" :origin-price="item.originalPrice" />
  </van-cell>
</van-list>
</van-pull-refresh>
  <!-- 单下拉刷新 -->
  <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  <section class="product-list">
    <div class="product-container" v-for="item in shopList"  @click="toProductDetail(item.id)" :key="item.id">
        <van-card :num="item.stock" :price="item.price" :desc="item.subtitle" :title="item.name" :thumb="item.imageHost+item.mainImage" :origin-price="item.originalPrice" />
    </div>
</section>
</van-pull-refresh> -->
   
  </div>
</template>
<script>
import headerCom from '../../components/header.vue'
import headerEle from './head.vue'
export default {
    created(){
      this.$store.commit('changeFooterShow',false)
      // this.$axios({
      //   url:'product/list',
      //   metthod:'get',
      //   params:{pageNum:1,pageSize:20}
      // }).then((res)=>{
      //   this.shopList = res.data.data.list
      // })
    },
    methods: {
      toProductDetail(key){
        this.$router.push({name:'Product-detail',params:{id:key}})
      },
      changeSort(flag){
        this.orderBy = flag
        this.pageNum = 1
        this.loading = true
        this.finished = false
        this.shopList = []
        this.onLoad()
      //   this.$axios({
      //   url:'product/list',
      //   metthod:'get',
      //   params:{orderBy:flag,pageSize:20}
      // }).then((res)=>{
      //   this.shopList = res.data.data.list
      // })
    },
      onRefresh(){
        this.pageNum = 1
        this.shopList = []
        let that = this
        this.$toast.loading({
                duration:2000,
                message: '加载中...',
                forbidClick: true,
                onClose:function(){
                  that.$axios({
               url:'product/list',
                metthod:'get',
                params:{orderBy:that.orderBy,pageNum:that.pageNum++,pageSize:10}
                 }).then((res)=>{
                that.$toast.success('加载成功')
                  that.shopList = that.shopList.concat(res.data.data.list)
                  that.isLoading = false
                if(that.finished)   {that.finished = false}
                }).catch(()=>{
        that.$toast.fail('加载失败')
      })
                }
            })
      },
       onLoad() {
         let that = this
        //  this.shopList = null      
         this.$toast.loading({
                duration:2000,
                message: '加载中...',
                forbidClick: true,
                onClose:function(){
                  that.$axios({
               url:'product/list',
                metthod:'get',
                params:{orderBy:that.orderBy,pageNum:that.pageNum++,pageSize:10}
                 }).then((res)=>{
                that.$toast.success('加载成功')
                
                  that.shopList = that.shopList.concat(res.data.data.list)
                  that.loading = false
                if(res.data.data.list.length < that.pageNum)  {
                  that.finished = true}
                }).catch(()=>{
        that.$toast.fail('加载失败')
        that.loading = false
        that.finished = true
      })
                }
            })

            
         
    
    },
    },
    data() {
      return {
         isLoading:false,
         loading:false,
        shopList:[],
        finished:false,
        pageNum:1,
        orderBy :'default'
      }
    },
    components:{
      headerEle,
      headerCom
    }
}
</script>


<style lang="scss" scoped>
.content{
  padding-bottom:0
}
.product-list {
  margin-top:200px ;
  // overflow: scroll;
}
</style>




